<div class="editor-row">
  <div class="section gf-form-group">
    <h5 class="section-heading">值</h5>

    <div class="gf-form-inline">
      <div class="gf-form" ng-show="ctrl.dataType === 'timeseries'">
        <label class="gf-form-label width-6">统计信息</label>
        <div class="gf-form-select-wrapper width-12">
          <select class="gf-form-input" ng-model="ctrl.panel.valueName" ng-options="f.value as f.text for f in ctrl.valueNameOptions" ng-change="ctrl.refresh()"></select>
        </div>
      </div>
      <div class="gf-form" ng-show="ctrl.dataType === 'table'">
        <label class="gf-form-label width-6">列</label>
        <div class="gf-form-select-wrapper width-12">
          <select class="gf-form-input" ng-model="ctrl.panel.tableColumn" ng-options="f for f in ctrl.tableColumnOptions" ng-change="ctrl.refresh()"></select>
        </div>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-6">字体大小</label>
        <div class="gf-form-select-wrapper">
          <select class="gf-form-input" ng-model="ctrl.panel.valueFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
        </div>
      </div>
    </div>

    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-6">前缀</label>
        <input type="text" class="gf-form-input width-12" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
        <label class="gf-form-label width-6">字体大小</label>
        <div class="gf-form-select-wrapper">
          <select class="gf-form-input" ng-model="ctrl.panel.prefixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()" ng-disabled="ctrl.canChangeFontSize()"></select>
        </div>
      </div>
    </div>

    <div class="gf-form">
      <label class="gf-form-label width-6">后缀</label>
      <input type="text" class="gf-form-input width-12" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
      <label class="gf-form-label width-6">字体大小</label>
      <div class="gf-form-select-wrapper">
        <select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()" ng-disabled="ctrl.canChangeFontSize()"></select>
      </div>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-6">单位</label>
      <div class="gf-form-dropdown-typeahead width-18" ng-model="ctrl.panel.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)"></div>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-6">小数点</label>
      <input type="number" class="gf-form-input width-18" placeholder="自动" data-placement="right" bs-tooltip="'覆盖图例和工具提示的自动小数精度'" ng-model="ctrl.panel.decimals" ng-change="ctrl.refresh()" ng-model-onblur>
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">染色</h5>
    <div class="gf-form-inline">
      <gf-form-switch class="gf-form" label-class="width-8" label="背景" checked="ctrl.panel.colorBackground" on-change="ctrl.render()"></gf-form-switch>
      <gf-form-switch class="gf-form" label-class="width-4" label="值" checked="ctrl.panel.colorValue" on-change="ctrl.render()"></gf-form-switch>
    </div>
    <div class="gf-form-inline">
      <div class="gf-form max-width-21">
        <label class="gf-form-label width-8">阈值
          <tip>Define two threshold values&lt;br /&gt; 50,80 will produce: value &lt; 50 = Green, 50 &lt;= value &lt; 80 = Yellow, value &gt;= 80 = Red</tip>
        </label>
        <input type="text" class="gf-form-input" ng-model="ctrl.panel.thresholds" ng-blur="ctrl.render()" placeholder="50,80"></input>
      </div>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-8">颜色</label>
      <span class="gf-form-label" ng-repeat="color in ctrl.panel.colors track by $index">
        <color-picker color="color" onChange="ctrl.onColorChange($index)"></color-picker>
      </span>
      <span class="gf-form-label">
        <a  ng-click="ctrl.invertColorOrder()">
          颠倒
        </a>
      </span>
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">火花线</h5>
    <gf-form-switch class="gf-form" label-class="width-9" label="显示" checked="ctrl.panel.sparkline.show" on-change="ctrl.render()"></gf-form-switch>
    <div ng-if="ctrl.panel.sparkline.show">
      <gf-form-switch class="gf-form" label-class="width-9" label="全高度" checked="ctrl.panel.sparkline.full" on-change="ctrl.render()"></gf-form-switch>
      <div class="gf-form">
        <label class="gf-form-label width-9">线条颜色</label>
        <span class="gf-form-label">
          <color-picker color="ctrl.panel.sparkline.lineColor" onChange="ctrl.onSparklineColorChange"></color-picker>
        </span>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-9">填充颜色</label>
        <span class="gf-form-label">
          <color-picker color="ctrl.panel.sparkline.fillColor" onChange="ctrl.onSparklineFillChange"></color-picker>
        </span>
      </div>
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">测量仪器</h5>
    <gf-form-switch class="gf-form" label-class="width-10" switch-class="max-width-6" label="显示" checked="ctrl.panel.gauge.show" on-change="ctrl.render()"></gf-form-switch>
    <div ng-if="ctrl.panel.gauge.show">
      <div class="gf-form">
        <label class="gf-form-label width-10">最小</label>
        <input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.minValue" ng-change="ctrl.refresh()" ng-model-onblur>
        <label class="gf-form-label alert-state-critical" ng-show="ctrl.invalidGaugeRange">
          &nbsp; <i class="fa fa-warning"></i>
          最小值大于最大值。
        </label>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-10">最大</label>
        <input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.maxValue" ng-change="ctrl.refresh()" ng-model-onblur>
      </div>
      <gf-form-switch class="gf-form" label-class="width-10" switch-class="max-width-6" label="阈值标签" checked="ctrl.panel.gauge.thresholdLabels" on-change="ctrl.render()"></gf-form-switch>
      <gf-form-switch class="gf-form" label-class="width-10" switch-class="max-width-6" label="阈值标记" checked="ctrl.panel.gauge.thresholdMarkers" on-change="ctrl.render()"></gf-form-switch>
    </div>
  </div>
</div>
